<template>
	<view class="view-module-banner-box" :style="{background: info.bg_color}" >
		<image class="view-banner-bg" :src="$imgUrl + info.bg_img" alt="" v-if="info.bg_img" />
		<view class="sw-box" :class="{ 'g2': info.goods_num == 2, 'g3': info.goods_num == 3 }">
			<swiper class="seckill-swiper square-dot" :indicator-color="info.dot_color" :indicator-active-color="info.dot_act_color" :current="current" :autoplay="false" circular :interval="3000"
				:indicator-dots="true" @change="onSwiperChange">
				<swiper-item class="seckill-swiper-item" v-for="(item, index) in goods_list" :key="index">
					<view class="gm-box" :style="{ 'grid-template-columns': 'repeat(' + info.goods_num + ', 1fr)' }">
						<view class="gmitem" v-for="(gmitem, gmindex) in item" :key="gmindex"
							@click.stop="jump(gmitem)">
							<view class="gmimg-box">
								<image class="gmimg" :src="$imgUrl + gmitem.thumb" alt="" />
								<view class="sg-tag-list gmlist" v-if="gmitem.act_tag && gmitem.act_tag.length > 0">
									<view class="sg-tag-item text-limit-1">
										{{ gmitem.act_tag[0] }}
									</view>
								</view>
							</view>
							<view class="sg-info-box gm-info-box">
								<view class="gmname-box">
									<view class="gmname">{{ gmitem.name }}</view>
								</view>
								<view class="sg-info-price">
									<text class="p-i">￥</text>
									<text>
										{{gmitem.activity_price}}
									</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>

// 常规轮播组件
const { proxy } = getCurrentInstance()

const props = defineProps({
	info: {
		type: [Object],
		default: {}
	}
})
const {info} = toRefs(props)

const data = reactive({
	current: 0
})

onMounted(() => {
	getData()
});

const goods_list = ref([])
async function getData() {
	let res = await proxy.$api('PageGoods', {
		ids: props.info.ids
	}, false, false)
	if (res.code == 0) {
		goods_list.value = res.data || []
		goods_list.value = group(goods_list.value, props.info.goods_num)
	}

}

function onSwiperChange(e) {
	data.current = e.detail.current
}
function group(arr, rowSize) {
	const result = Array(Math.ceil(arr.length / rowSize))
		.fill()
		.map((_, index) => {
			return arr.slice(index * rowSize, (index + 1) * rowSize)
		})
	return result
}
</script>

<style lang="scss" scoped>
.view-module-banner-box {
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: relative;
	padding: 0 20rpx;
	.sw-box {
		width: 100%;
		position: relative;

		.seckill-swiper,
		.seckill-swiper-item {
			// display: grid;
			width: 100%;
			height: 100%;
		}
	}
	.g2{
		height: 544rpx;
	}
	.g3{
		height: 410rpx;
	}

	.view-banner-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
	}

	.gm-box {
		display: grid;
		gap: 20rpx;
	}

	.gmitem {
		height: auto;
		border-radius: 8rpx;
		background-color: #fff;
		position: relative;
	}

	.gmimg-box {
		width: 100%;
		padding-top: 100%;
		position: relative;
		background-color: #fff;
	}

	.gmimg {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}

	.gmname-box {
		margin-top: 4rpx;
		min-height: 76rpx;
	}

	.gmname {
		width: 100%;
		font-size: 24rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 限制显示的行数为3行 */
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
	}

	.gmlist {
		width: 100%;
		height: 66rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
	}

	.sg-info-box {
		display: block;
		width: 100%;
		height: auto;
		padding: 8rpx;
		box-sizing: border-box;
	}

	.sg-info-name {
		margin: 0 auto;
		font-size: 20rpx;
		text-align: center;
		padding: 0 8rpx;
	}

	.sg-info-price {
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #f00;
		padding:0 0 10rpx 0;

		.p-i {
			font-size: 20rpx;
		}
	}

	.sg-tag-list {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		max-height: 38rpx;
		overflow: hidden;
		padding: 0 10rpx;
	}

	.sg-tag-item {
		padding: 2rpx 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		display: inline-block;
		font-size: 18rpx;
		background: #fff6f6;
		border: 1px solid #fff6f6;
		color: #f00;
		border-radius: 4rpx;
	}
	
}
</style>
